<template>
    <g-table-page
        :store-model-name="storeModelName"
        add-btn-link="/admin/surveyPlan/add"
        add-btn-link-text="添加调研计划"
        :selection="false"
        :table-operation="tableOperation"
        :show-dropdown-groups="true"
    >
        <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
        <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
            <div v-if="row">
                <span v-if="item.prop == 'qnStartDate|qnEndDate'">
                    {{ dayjs(row['qnStartDate']).format('YYYY-MM-DD') }} 至
                    {{ dayjs(row['qnEndDate']).format('YYYY-MM-DD') }}
                </span>
                <span v-if="item.prop == 'dataStime|dataEtime'">
                    {{ dayjs(row['dataStime']).format('YYYY-MM-DD') }} 至
                    {{ dayjs(row['dataEtime']).format('YYYY-MM-DD') }}
                </span>
            </div>
        </template>
    </g-table-page>
</template>

<script setup lang="ts">
import { computed, toRefs, ref } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { updateBackMenuApi } from '@/api/system'
import { ElMessage } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import dayjs from 'dayjs'
import { updateQuestionnaireApi } from '@/api/admin'
import { log } from 'console'

const storeModelName = 'surveyPlanModule'
const tableOperation = {
	width: 120,
	fixed: 'right',
	buttonGroups: [
		({ row }) => {
			return {
				name: '编辑',
				isShow: true,
				click: ({ row }) => {
					router.push({
						path: '/admin/surveyPlan/edit',
						query: { id: row.menuId }
					})
				}
			}
		},
		({ row }) => {
			return {
				name: '删除',
				type: 'danger',
				isShow: true,
				click: ({ row }) => {
					updateQuestionnaireApi({ qnId: row.qnId, qnDisplayStatus: 0 }).then((res) => {
						if (res * 1 === 200) {
							ElMessage.success('删除成功')
							setTimeout(() => {
								router.go(0)
							}, 100)
						}
					})
				}
			}
		}
	]
}

const tableHeadListSlotName = computed(() => {
	const tableHeadList = store.state[storeModelName].tableHeadList
	return tableHeadList.filter((item: TableHeadList) => item.slotName)
})
</script>
